The alt and title attributes

When browser vendors bend the standards and implement something in a different way than what the specification states, they may cause problems, or at least confusion. One example of this is the way certain browsers, the most widely used being Internet Explorer for Windows, handle alt attributes (popularly and incorrectly referred to as “alt tags”).

Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The title attribute, on the other hand, is meant to provide additional information about an element. That information is displayed as a tooltip by most graphical browsers, though manufacturers are free to render title text in other ways.

Many people seem to confuse these two attributes (just recently the question was raised on the Web Standards Group mailing list), so I'll offer my opinion on how to use them.

The alt attribute

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.

Source: HTML 4.01, How to specify alternate text.

The alt attribute (yes, it's an attribute, not a tag) contains an alternative description, and is required for images and image maps. It can only be used for the img, area, and input elements (and the deprecated applet element). For the input element, the alt attribute is meant to be used for graphical submit buttons: <input type="image" src="image.gif" alt="Submit" />.

Use the alt attribute to provide text for visitors who, for whatever reason, can't see the images in your document. This includes visitors using browsers that cannot display images or have image display disabled, visually impaired visitors, and screen reader users. Alt text is to be used instead of an image, not as additional information.

Think carefully before writing alternate texts. Make sure that the text actually provides useful information to anyone not seeing the image, and that it makes sense in the context. For decorative images, use an empty string (alt="", with no space between the quotes) as the value instead of specifying irrelevant alternate text like “blue bullet” or “spacer gif”. Don't omit it. If you do, some screen readers will read the image's file name, and text-only browsers like Lynx will display the image's file name. This is rarely useful to your visitors.

The easiest images to write alt text for are probably those that contain text. In that case, the text the image contains is generally what should be in the alt attribute.

When it comes to the length of alt text, here's what the WCAG 2.0 says:

The ALT attribute value must be less than 100 characters for English text or the user must confirm that the Alt text is as short as possible.

I interpret that as “make it as short as possible, but as long as necessary”.

And don't use the alt attribute for text that you want to appear as a tool tip. It's not the way it was meant to be used, and as far as I know, it only works like that in Internet Explorer for Windows and in Windows versions of the ancient Netscape 4.*. No Mac browsers display alt text as a tool tip.

When browsers display alternative text as a tooltip, they are encouraging misuse of the alt attribute. Some people will write less useful alternative text because they tend to think of it as additional information, not as a replacement for the image. Others may not want the tooltips to appear, and completely omit alternative text. Both of these misuses of the alt attribute makes things harder for those who cannot see the image.

Use the title attribute for additional, non-essential information.

The title attribute

This attribute offers advisory information about the element for which it is set.

Source: HTML 4.01, The title attribute.

The title attribute can be used with all elements except for base, basefont, head, html, meta, param, script, and title, but it isn't required for any. Maybe that's why it's less clear when to use it.

Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.

One good use of the title attribute is to add descriptive text to links, especially if the link text itself doesn't clearly describe the link's destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn't anything they're interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.

Title text can be longer than alt text. However, keep in mind that some browsers crop the text they display (as a tooltip or otherwise). Browsers based on Mozilla, for example, only display the first 60 characters of a title text in a tooltip. While that should likely be considered a Mozilla bug, it's something you should be aware of.

Think before using

My advice is to keep alt text short and to the point. In the majority of cases, this should mean an empty string, alt="" (again, no space between the quotes). Think about the image. What information does it provide to anyone looking at it, and how can you use text to provide that same, or similar, information to those who cannot see it? Does it really help someone who can't see it to know that it's a “Picture of the CEO standing outside the main building, wearing a gray suit with a black tie, and looking up at the sky.” If it does, go ahead. In most cases I find that an empty string is better.

The title attribute is harder to give strict guidelines for. I use it mainly for links that aren't self-explanatory, when several links on the same page have the same link text but different destinations, and sometimes to provide more information about something, like a button or a form control.

Longer descriptions

When an image needs a longer description than what is suitable for the alt attribute, there are a few options.

The longdesc attribute can be used to provide a link to a separate document that contains a textual description of the image. Doing so means linking people away from the current document, which may make it more difficult to comprehend. On top of that, browser support for longdesc is inconsistent, and not very good.

The longdesc attribute can contain a link to a section of the current document instead of to a separate document. In Accessibility footnotes, Andy Clarke has written a nice explanation of how that can be implemented.

D links can be used as an option to longdesc. A D link (description link) is a regular link to a document containing alternative content. The link is placed next to the image in the document, and is visible to all browsers. Opinions of its usefulness vary though, and personally I don't really like the idea. Neither does the Web Content Accessibility Guidelines Working Group—in the working draft of HTML Techniques for WCAG 2.0, D links are marked as deprecated.

If the long description of the image is of use to sighted as well as non-sighted visitors, you may consider keeping it in plain view in the same document instead of putting it in a separate document or otherwise hiding it. That way everybody can read it. A low-tech but foolproof method.

Give me more information

Want to read more about the alt, title, and longdesc attributes? Start here:

Posted on December 8, 2004 in Accessibility, Usability, (X)HTML